<!DOCTYPE html>
<html>
<head>
  <link href="css/window.css" rel="stylesheet">
  <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.4.custom.min.css">
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="window.js"></script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-edit">Edit Current Window</a></li>
      <li><a href="#tabs-new">Create New Window</a></li>
    </ul>

    <div id="tabs-edit">
      <div class="tab-body">
        <div class="buttons">
          <button id="fullscreen">Fullscreen</button>
          <button id="maximize">Maximize</button>
          <button id="minimize">Minimize</button>
          <button id="restore">Restore</button>
          <button id="close">Close</button><br>
          <button id="hide">Hide, then Show</button>
          <button id="showInactive">Hide, then Show Inactive</button>
          <button id="drawAttention">Draw Attention</button>
          <button id="clearAttention">Clear Attention</button>
        </div>
        <div class="columns">
          <div class="section edit-left">
            <h3>Options</h3>
            <table>
              <tr>
                <td>ID:</td>
                <td colspan="2"><input type="text" id="currentWindowId" disabled /></td>
              </tr>
              <tr>
                <td>Always On Top:</td>
                <td><input type="checkbox" id="currentWindowOnTop" /></td>
              </tr>
            </table>
          </div>

          <div class="section edit-right">
            <h3>Bounds</h3>
            <div id="accordion">
              <h3>Outer Bounds</h3>
              <div>
                <table>
                  <tr>
                    <td>Left, Top:</td>
                    <td><input type="number" class="size" id="outerWindowLeft" step=1 /></td>
                    <td><input type="number" class="size" id="outerWindowTop" step=1 /></td>
                    <td><button id="setOuterPosition">Set</button></td>
                  </tr>
                  <tr>
                    <td>Width, Height:</td>
                    <td><input type="number" class="size" id="outerWindowWidth" step=1 /></td>
                    <td><input type="number" class="size" id="outerWindowHeight" step=1 /></td>
                    <td><button id="setOuterSize">Set</button></td>
                  </tr>
                  <tr>
                    <td>Min Width, Height:</td>
                    <td><input type="number" class="size" id="outerWindowMinWidth" step=1 /></td>
                    <td><input type="number" class="size" id="outerWindowMinHeight" step=1 /></td>
                    <td>
                      <button id="setOuterMinSize">Set</button>
                      <button id="clearOuterMinSize">Clear</button>
                    </td>
                  </tr>
                  <tr>
                    <td>Max Width, Height:</td>
                    <td><input type="number" class="size" id="outerWindowMaxWidth" step=1 /></td>
                    <td><input type="number" class="size" id="outerWindowMaxHeight" step=1 /></td>
                    <td>
                      <button id="setOuterMaxSize">Set</button>
                      <button id="clearOuterMaxSize">Clear</button>
                    </td>
                  </tr>
                </table>
              </div>
              <h3>Inner Bounds</h3>
              <div>
                <table>
                  <tr>
                    <td>Left, Top:</td>
                    <td><input type="number" class="size" id="innerWindowLeft" step=1 /></td>
                    <td><input type="number" class="size" id="innerWindowTop" step=1 /></td>
                    <td><button id="setInnerPosition">Set</button></td>
                  </tr>
                  <tr>
                    <td>Width, Height:</td>
                    <td><input type="number" class="size" id="innerWindowWidth" step=1 /></td>
                    <td><input type="number" class="size" id="innerWindowHeight" step=1 /></td>
                    <td><button id="setInnerSize">Set</button></td>
                  </tr>
                  <tr>
                    <td>Min Width, Height:</td>
                    <td><input type="number" class="size" id="innerWindowMinWidth" step=1 /></td>
                    <td><input type="number" class="size" id="innerWindowMinHeight" step=1 /></td>
                    <td>
                      <button id="setInnerMinSize">Set</button>
                      <button id="clearInnerMinSize">Clear</button>
                    </td>
                  </tr>
                  <tr>
                    <td>Max Width, Height:</td>
                    <td><input type="number" class="size" id="innerWindowMaxWidth" step=1 /></td>
                    <td><input type="number" class="size" id="innerWindowMaxHeight" step=1 /></td>
                    <td>
                      <button id="setInnerMaxSize">Set</button>
                      <button id="clearInnerMaxSize">Clear</button>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="tabs-new">
      <div class="tab-body">
        <div class="buttons">
          <button id="newWindow">Create Window</button>
        </div>
        <div class="columns">
          <div class="section new-column">
            <h3>Options</h3>
            <table>
              <tr>
                <td>ID:</td>
                <td>
                  <select id="newWindowId">
                    <option value="none">Without ID</option>
                    <option value="ID1">ID1</option>
                    <option value="ID2">ID2</option>
                  </select>
                  <br>
                  <small>The ID will restore the previous position</small>
                </td>
              </tr>
              <tr>
                <td>Initial State:</td>
                <td>
                  <select id="newWindowState">
                    <option value="normal">Normal</option>
                    <option value="fullscreen">Fullscreen</option>
                    <option value="maximized">Maximized</option>
                    <option value="minimized">Minimized</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>Frame:</td>
                <td>
                  <label><input type="radio" name="newWindowFrame" value="chrome" checked />Chrome</label>
                  <label><input type="radio" name="newWindowFrame" value="none" />None</label>
                </td>
              </tr>
              <tr>
                <td>Color, Inactive Color:</td>
                <td>
                  <input type="text" class="size" id="newWindowColor" placeholder="#000000" />
                  <input type="text" class="size" id="newWindowInactiveColor" placeholder="#000000" />
                </td>
              </tr>
              <tr>
                <td>Visibility:</td>
                <td>
                  <label><input type="radio" name="newWindowHidden" value="visible" checked />Visible</label>
                  <label><input type="radio" name="newWindowHidden" value="hidden" />Hidden, then shown</label>
                </td>
              </tr>
              <tr>
                <td>Resizable:</td>
                <td><input type="checkbox" id="newWindowResizable" checked/></td>
              </tr>
              <tr>
                <td>Always On Top:</td>
                <td><input type="checkbox" id="newWindowOnTop" /></td>
              </tr>
              <tr>
                <td>Focused:</td>
                <td><input type="checkbox" checked id="newWindowFocused"></td>
              </tr>
            </table>
          </div>

          <div class="section new-column">
            <h3>Bounds</h3>
            <label><input type="radio" name="newWindowBoundsType" value="outerBounds" checked />Outer bounds</label>
            <label><input type="radio" name="newWindowBoundsType" value="innerBounds" />Inner bounds</label>
            <p></p>
            <table>
              <tr>
                <td>Left, Top:</td>
                <td><input type="number" class="size" id="newWindowLeft" step=1 /></td>
                <td><input type="number" class="size" id="newWindowTop" step=1 /></td>
              </tr>
              <tr>
                <td>Width, Height:</td>
                <td><input type="number" class="size" id="newWindowWidth" step=1 /></td>
                <td><input type="number" class="size" id="newWindowHeight" step=1 /></td>
              </tr>
              <tr>
                <td>Min Width, Height:</td>
                <td><input type="number" class="size" id="newWindowMinWidth" step=1 /></td>
                <td><input type="number" class="size" id="newWindowMinHeight" step=1 /></td>
              </tr>
              <tr>
                <td>Max Width, Height:</td>
                <td><input type="number" class="size" id="newWindowMaxWidth" step=1 /></td>
                <td><input type="number" class="size" id="newWindowMaxHeight" step=1 /></td>
              </tr>
            </table>
            <p><button id="copyWindowBounds">Copy this window's bounds</button></p>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>
